<template>
    <div class="">
        <a-form
            id="components-form-demo-normal-login"
            :form="form"
            class="login-form"
            @submit="handleSubmit"
        >
            <a-form-item>
            <a-input
                v-decorator="[
                'userName',
                { rules: [{ required: true, message: '请输入手机号!' }] },
                ]"
                placeholder="请输入手机号"
            >
                <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
            </a-input>
            </a-form-item>
            <a-form-item>
                <a-input class="confirmcode"
                    v-decorator="[
                    'password',
                    { rules: [{ required: true, message: '请输入验证码!' }] },
                    ]"
                    type="password"
                    placeholder="请输入验证码"
                >
                    <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                </a-input>
                <button class="confirmBtn">获取验证码</button>
            </a-form-item>
            <a-form-item>
            <a-button type="primary" html-type="submit" class="login-form-button">
                登录
            </a-button>
            <a href="javascript:void(0)" @click="showRegisterModal">立即注册</a>
                <registerView></registerView>
            <a class="login-form-forgot" href="">忘记密码</a>
            </a-form-item>
        </a-form>
    </div>
</template>
<script>
import { getLogin } from '@/api/request';
import registerView from './registerView';

export default {
    data() {
        return {
            registerVisible: false,
            form: this.$form.createForm(this, { name: 'horizontal_login' }),
        };
    },
    beforeCreate() {
        this.form = this.$form.createForm(this, { name: 'normal_login' });
    },
    mounted() {},
    components: {
        registerView, 
    },
    methods: {
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    console.log('接收到的表单中的值：', values);
                    getLogin(values.userName, values.password).then(res => {
                        if (res.code === 0) {
                            this.$store.commit('setUserInfo', res.userInfo);
                            this.$store.commit('setLogin', false); 
                        }
                    });
                }
            });
        },
        showRegisterModal() {
            this.registerVisible = true; // 显示注册对话框
        },
        handleRegisterCancel() {
            this.registerVisible = false; // 隐藏注册对话框
        },
    },
};
</script>
<style lang="scss" scoped>
.login-form-button {
    background-color: #00cf8c;
    border: none;
    &:hover,
    &:focus {
        background-color: #00cf8c;
        border: none;
    }
}
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
.confirmcode {
    width: 70%; 
}
.confirmBtn {
    width: 25%;
    background-color: #00cf8c;
    color: #fff;
    margin-left: 20px;
    border: none;
    border-radius: 4px;
    &:hover,
    &:focus {
        background-color: #00cf8c;
        border: none;
    }
}
</style>